import React, { Component } from 'react'
import {connect} from 'react-redux'
import {Cproduct} from '../../../types/product'
import CarProduct from '../../../components/car-product'
import './index.scss'

interface IProps{
    carList:Cproduct[],
    del:(isDel:boolean,id:number) => void,
    checkAll:boolean,
    changeCheckAll:(checkAll:boolean) => void,
    total:number
}

interface IState{
    isShow:boolean,
    id:number
}

class Car extends Component <IProps,IState>{
    state = {
        isShow:false,
        id:-1
    }
    render() {
        let {carList,checkAll,total} = this.props;
        let {isShow} = this.state;
        return (
            <div>
                <div>
                    {carList.length && carList.map((item:Cproduct) => <CarProduct key={item.id} item={item} open={this.open}></CarProduct>)}
                </div>
                <div>
                    <input type="checkbox" checked={checkAll} onChange={() => {
                        this.props.changeCheckAll(!checkAll)
                    }}/>
                    总钱：{total}
                </div>
                <div className="confirm" style={{display:isShow?'block':'none'}}>
                    <h5>您确定要删除吗？</h5>
                    <div>
                        <button onClick={this.close}>取消</button>
                        <button onClick={this.cur}>确定</button>
                    </div>
                </div>
                
            </div>
        )
    }

    //关闭弹窗
    close = () => {
        this.setState({
            isShow:false
        })
    }

    open = (id:number) => {
        this.setState({
            isShow:true,
            id
        })
    }

    //确定删除
    cur = () => {
        let {id} = this.state;
        this.props.del(true,id);
        //关闭弹窗
        this.close();
    }
}

let stateMapToProps = (state:any) => {
    return {
        carList:state.list.carList,
        checkAll:state.list.checkAll,
        total:state.list.total
    }
}

let dispatchMapToProps = (dispatch:any) => {
    return {
        del(isDel:boolean,id:number){
            dispatch({type:'CHANGE_NUM',isDel,id})
        },
        changeCheckAll(checkAll:boolean){
            dispatch({type:'CHECK_ALL',checkAll})
        }
    }
}
export default connect(stateMapToProps,dispatchMapToProps)(Car)